<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-home"></i> 系统首页 / 轮播图设置
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.type" placeholder="" class="handle-select mr10">
					<el-option key="0" label="全部" value=""></el-option>
					<el-option key="1" label="PC端" value="1"></el-option>
					<el-option key="2" label="移动端" value="2"></el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch" style="height: 40px">搜索</el-button>
				<el-button type="primary" icon="el-icon-lx-add" @click="handleAdd" style="height: 40px">添加</el-button>
				<el-button icon="el-icon-lx-refresh" @click="refreshPage" :loading="refreshLoading" style="height: 40px">刷新</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column label="图片" align="center" width="160">
					<template #default="scope">
						<div class="cover" :style="'background-image: url(\''+(scope.row.pic ? config.imgPath + scope.row.pic : '')+'\')'"></div>
					</template>
				</el-table-column>
				<el-table-column prop="title" label="图片备注" align="center"></el-table-column>
				<el-table-column prop="type_name" label="类型" width="150" align="center"></el-table-column>
				<el-table-column label="状态" align="center" width="120">
					<template #default="scope">
						<el-tag :type="
                                scope.row.status === 1
                                    ? 'success'
                                    : scope.row.status === 0
                                    ? 'danger'
                                    : ''
                            ">{{ scope.row.status === 1 ? '已显示' : '已隐藏' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template #default="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination hide-on-single-page background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<SlideAdd v-if="addVisible" :compVisible="addVisible" @handleaddhide="handleAddHide" />
		<SlideDetail v-if="editVisible" :editId="editId" :compVisible="editVisible" @handlemodhide="handleEditHide" />
	</div>
</template>
<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getSlideList,deleteSlide } from "../../api/api";
import SlideAdd from "./SlideAdd.vue";
import SlideDetail from "./SlideDetail.vue";
export default {
	name: "slide",
	components: { SlideAdd,SlideDetail },
	setup() {
		const query = reactive({
			type: "",
			pageIndex: 1,
			pageSize: 5,
		})
		const tableData = ref([])
		const pageTotal = ref(0)
		const addVisible = ref(false);
		const editVisible = ref(false);
		const editId = ref(0);

		const getData = () => {
			getSlideList(query).then(res => {
				for(let index in res.data.list) {
					switch (res.data.list[index].type) {
						case 1:
							res.data.list[index].type_name = 'PC端'
							break;
						case 2:
							res.data.list[index].type_name = '移动端'
							break;
						default:
							res.data.list[index].type_name = ''
					}
				}
				tableData.value = res.data.list
				pageTotal.value = res.data.count
			}).catch(err => {
				console.log(err,'----errr')
			})
		}
		getData()
		const refreshLoading = ref(false)
		const refreshPage = () => {
			refreshLoading.value = true
			Promise.all([getData()]).then(res => {
				ElMessage.success('已刷新')
				refreshLoading.value = false
			}).catch(err => {console.log(err)})
		}
		// 查询操作, 分页导航
		const handleSearch = () => {
			query.pageIndex = 1;getData();
		};
		const handlePageChange = (val) => {
			query.pageIndex = val;getData();
		};
		// 删除操作
		const handleDelete = (index) => {
			ElMessageBox.confirm("确定要删除吗？", "提示", {
				type: "warning",
			}).then(() => {
				let data = {
					id: tableData.value[index].id,
				}
				return deleteSlide(data)
			}).then(res => {
				ElMessage.success("删除成功")
				tableData.value.splice(index, 1)
			}).catch(err => {
				console.log(err,'----delete err')
			})
		}

		const handleAdd = () => {
			addVisible.value = true
		}
		const handleAddHide = (value) => {
			addVisible.value = false
			if(value === 'success') { getData() }
		}
		const handleEdit = (index,row) => {
			editId.value = row.id
			editVisible.value = true
		}
		const handleEditHide = (value) => {
			editVisible.value = false
			if(value === 'success') { getData() }
		}
		return {
			query,
			refreshLoading,
			tableData,
			pageTotal,
			addVisible,
			editVisible,
			editId,
			refreshPage,
			handleSearch,
			handlePageChange,
			handleDelete,
			handleAdd,
			handleAddHide,
			handleEdit,
			handleEditHide
		}
	}
};
</script>

<style scoped lang="scss">
.handle-box {
	margin-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
}
.handle-select {
	width: 150px;
	margin-bottom: 15px;
}
.handle-input {
	width: 300px;
	margin-bottom: 15px;
}
.table {
	width: 100%;
	font-size: 14px;
	.cover {
		width: 140px;
		height: 80px;
		background-position: center center;
		background-size: cover;
	}
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
</style>
